Skip to content

Typescript-Angular: Fix several query parameters serialization issues #21949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Typescript-Angular: Fix several query parameters serialization issues #21949

wants to merge 6 commits into from

Conversation

@VladimirSvoboda
Copy link
Contributor

@VladimirSvoboda VladimirSvoboda commented Sep 11, 2025 •
edited
Loading

This notably fixes:

  • JSON query param serialization
  • array serialization with style=form and explode = true

The first commits of the patch introduces integration tests for query
parameters serialization in
samples/client/others/typescript-angular-v20:

  • samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_deep_object.spec.ts (move of an existing test)
  • samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_form.spec.ts (new test)
  • samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_json.spec.ts (new test)

They should be executed as part of CircleCI.
The last commit fixes the issue.
Fixes are in the following files:

  • modules/openapi-generator/src/main/resources/typescript-angular/api.base.service.mustache
  • modules/openapi-generator/src/main/resources/typescript-angular/api.service.mustache
  • modules/openapi-generator/src/main/resources/typescript-angular/encoder.mustache

As the class HttpParams from Angular is specially designed for the
mimetype: application/x-www-form-urlencoded it does not support
the range of query parameters defined by the OpenAPI specification.
To workaround this issue, this patch introduces a custom
OpenAPIHttpParams class which supports a wider range of query param
styles.

Note that as HttpClient is used afterwards, the class
OpenApiHttpParams has a method to convert it into a HttpParams from
Angular with a no-op HttpParameterCodec to avoid double serialization of
the query parameters.

Fixes #21934 and #20998.

PR checklist

  • Read the contribution guidelines.
  • Pull Request title clearly describes the work in the pull request and Pull Request description provides details about how to validate the work. Missing information here may result in delayed response from the community.
  • Run the following to build the project and update samples: 
    ./mvnw clean package || exit
./bin/generate-samples.sh ./bin/configs/*.yaml || exit
./bin/utils/export_docs_generators.sh || exit
    (For Windows users, please run the script in WSL)
    Commit all changed files.
    This is important, as CI jobs will verify all generator outputs of your HEAD commit as it would merge with master.
    These must match the expectations made by your contribution.
    You may regenerate an individual generator by passing the relevant config(s) as an argument to the script, for example ./bin/generate-samples.sh bin/configs/java*.
    IMPORTANT: Do NOT purge/delete any folders/files (e.g. tests) when regenerating the samples as manually written tests may be removed.
  • File the PR against the correct branch: master (upcoming 7.x.0 minor release - breaking changes with fallbacks), 8.0.x (breaking changes without fallbacks)
  • If your PR solves a reported issue, reference it using GitHub's linking syntax (e.g., having fixes #123 present in the PR description)
  • If your PR is targeting a particular programming language, @mention the technical committee members, so they are more likely to review the pull request.
    @TiFu (2017/07) @taxpon (2017/07) @sebastianhaas (2017/07) @kenisteward (2017/07) @Vrolijkx (2017/09) @macjohnny (2018/01) @topce (2018/10) @akehir (2019/07) @petejohansonxo (2019/11) @amakhrov (2020/02) @davidgamero (2022/03) @mkusaka (2022/04) @joscha (2024/10)

@VladimirSvoboda VladimirSvoboda force-pushed the AngularJsonQueryParam branch 2 times, most recently from 2804cf9 to ad80f9f Compare September 15, 2025 13:51
@kzander91
Copy link

Please also consider #20998, where query parameters are being serialized to JSON when it is not expected.

@VladimirSvoboda
Copy link
Contributor Author

Please also consider #20998, where query parameters are being serialized to JSON when it is not expected.

Even without my changes, the following test succeeds

openapi-generator/samples/client/others/typescript-angular-v20/projects/app/src/api.query_param_form.spec.ts

Lines 63 to 68 in ca750c0

it('should separate the query parameter with ampersands (object only)', async () => {
service.searchExplode(undefined, filter, undefined).subscribe();
const req = httpTesting.expectOne('http://localhost/search_explode?name=John&age=37');
expect(req.request.method).toEqual('GET');
});

Could you provide a minimal OpenAPI specification so that I could reproduce it ?

@kzander91
Copy link

kzander91 commented Sep 29, 2025 •
edited
Loading

My comment wasn't feedback on your PR, as I haven't tested your implementation, but rather a hint for you to please consider that some folks want the inverse of the issue you're trying to solve (#21934 wants JSON, but doesn't get it, #20998 gets JSON, but doesn't want it).
Specs and examples are given in the issue I have linked: #20998

If your implementation already considers this, please disregard my comment :)
Thanks

@VladimirSvoboda
Copy link
Contributor Author

Thanks for the clarification and I would be glad to fix another bug. However, your original issue does not contain an OpenAPI specification showing the problem.
This would be nice if you can provide one as I cannot reproduce the issue.

@kzander91
Copy link

kzander91 commented Sep 29, 2025 •
edited
Loading

You're right, sorry, I thought there was a spec in there 🙈
I have added one right now: #20998 (comment)

@VladimirSvoboda
Generate skeleton for new integration test
d322edc
@VladimirSvoboda
Typescript-angular: Move query param deep-object test
2f54eb6
@VladimirSvoboda
typescript-angular: Add query param JSON test
94c3aa3
@VladimirSvoboda
Typescript-angular: Add query param form test
2576813
@VladimirSvoboda
Test for OpenAPITools#20998
4fb2eb2
@VladimirSvoboda
typescript-angular: Reimplement query param serialisation
d05d484 
This notably fixes:
- JSON query param serialisation
- array serialisation with style=form and explode=true

As the class HttpParams from Angular is specially designed for the
mimetype: `application/x-www-form-urlencoded` it does not support
the range of query parameters defined by the OpenAPI specification.
To workaround this issue, this patch introduces a custom
`OpenAPIHttpParams` class which supports a wider range of query param
styles.

Note that as `HttpClient` is used afterwards, the class
`OpenApiHttpParams` has a method to convert it into a `HttpParams` from
Angular with a no-op HttpParameterCodec to avoid double serialisation of
the query parameters.
@VladimirSvoboda
Copy link
Contributor Author

Hi, @kzander91 I finally got a bit of time to work on it. I think I have fixed the issue you mentioned in the PR.

CC @macjohnny (as I see that you have reviewed Angular PR recently).

@macjohnny
Copy link
Member

@VladimirSvoboda thanks for your contribution. i will try to find some time in the next couple of weeks, its quite a complex PR that requires some time to review it ;-)

@joscha
Copy link
Contributor

joscha commented Oct 17, 2025

@VladimirSvoboda thanks for your contribution. i will try to find some time in the next couple of weeks, its quite a complex PR that requires some time to review it ;-)

would it make sense to split the two fixes? That would reduce complexity quite a bit and also ensure we don't miss cross-effects.

@VladimirSvoboda
Copy link
Contributor Author

As it is a reimplementation of the query param handling for the typescript-angular generator, I don't think that it makes sense to split in several PR depending on the issue it fixes.
I have already split the PR in several commits where all but last commit introduce tests and the last commit is the reimplementation (aka fix).
Some of the tests are failing without the last commit.

But if you believe it would be better, I can reimplement one of the 2 erroneous behaviour in this PR but this will not significantly reduce its size, or do you have another suggestion?

@joscha
Copy link
Contributor

joscha commented Oct 17, 2025

As it is a reimplementation of the query param handling for the typescript-angular generator, I don't think that it makes sense to split in several PR depending on the issue it fixes.
I have already split the PR in several commits where all but last commit introduce tests and the last commit is the reimplementation (aka fix).
Some of the tests are failing without the last commit.

But if you believe it would be better, I can reimplement one of the 2 erroneous behaviour in this PR but this will not significantly reduce its size, or do you have another suggestion?

The idea was only to reduce the complexity. If splitting it does not reduce then there's no point in doing so. Thanks for giving it thought!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] Typescript-angular: JSON query params are not serialized as JSON

4 participants

@VladimirSvoboda @kzander91 @macjohnny @joscha